<template>
  <el-container style="height: 100vh;">
    <!-- <el-aside width="200px" style="background-color: #304156">
      default-openeds属性指默认打开的栏目
      <el-menu :default-openeds="['1', '2']">
        <el-submenu index="1" class="navigation">
          <template slot="title"
            ><i class="el-icon-message"></i>Data Overview</template
          >
          <el-menu-item-group>
            <el-menu-item index="1-1" @click="addTab(editableTabsValue)"
              >look</el-menu-item
            >
            <el-menu-item index="1-2">table</el-menu-item>
            <el-menu-item index="1-3">select</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2" class="navigation">
          <template slot="title"
            ><i class="el-icon-menu"></i>Student Management</template
          >
          <el-menu-item-group>
            <el-menu-item index="2-1">Grade List</el-menu-item>
            <el-menu-item index="2-2">Score Entry</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="3" class="navigation">
          <template slot="title"
            ><i class="el-icon-setting"></i>Class List</template
          >
          <el-menu-item-group>
            <el-menu-item index="3-1">Exam Admin</el-menu-item>
            <el-menu-item index="3-2">Teacher List</el-menu-item>

            <el-menu-item index="3-3">Course List</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside> -->

    <el-aside width="200px" style="background-color: #304156">
      <!-- default-openeds属性指默认打开的栏目 -->
      <el-menu :default-openeds="[]">
        <el-submenu index="1" class="navigation">
          <template slot="title"
            ><i class="el-icon-message"></i>Statistics</template
          >
          <el-menu-item-group>
            <el-menu-item index="1-1" @click="index1">Statistics</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="2" class="navigation">
          <template slot="title"><i class="el-icon-menu"></i>Subject</template>
          <el-menu-item-group>
            <el-menu-item index="2-1" @click="index2">Enter</el-menu-item>
            <el-menu-item index="2-2" @click="index3">Modify</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="3" class="navigation">
          <template slot="title"
            ><i class="el-icon-setting"></i>Student</template
          >
          <el-menu-item-group>
            <el-menu-item index="3-1" @click="index4">Score Entry</el-menu-item>
            <el-menu-item index="3-2" @click="index5">Modify</el-menu-item>
            <el-menu-item index="3-3" @click="index6"
              >Enter Student</el-menu-item
            >
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header
        style="text-align: right; font-size: 12px;height: auto; margin-top: 20px;"
      >
        <!-- 抽屉弹框 -->
        <el-row :gutter="15" style="margin-bottom: 30px;">
          <!-- 弹出框样式 -->
          <el-drawer
            :visible.sync="drawer"
            :direction="direction"
            size="15%"
            :withHeader="false"
            :modal="false"
          >
            <el-aside
              width="100%"
              height="100%"
              style="background-color: #304156;"
            >
              <!-- default-openeds属性指默认打开的栏目 -->
              <el-menu :default-openeds="['1', '2', '3']">
                <el-submenu index="1" class="navigation">
                  <template slot="title"
                    ><i class="el-icon-user"></i>My Subjects1</template
                  >
                  <el-menu-item-group>
                    <el-menu-item index="1-1" @click="addTab(editableTabsValue)"
                      >class 1</el-menu-item
                    >
                    <el-menu-item index="1-2">class 2</el-menu-item>
                    <el-menu-item index="1-3">class 3</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2" class="navigation">
                  <template slot="title"
                    ><i class="el-icon-help"></i>My Subject2</template
                  >
                  <el-menu-item-group>
                    <el-menu-item index="2-1">class 1</el-menu-item>
                    <el-menu-item index="2-2">class 2</el-menu-item>
                    <el-menu-item index="2-3">class 3</el-menu-item>
                    <el-menu-item index="2-4">class 4</el-menu-item>
                    <el-menu-item index="2-5">class 5</el-menu-item>
                    <el-menu-item index="2-6">class 6</el-menu-item>
                    <el-menu-item index="2-7">class 7</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </el-menu>
            </el-aside>
          </el-drawer>
          <!-- 顶部tab栏布局 -->
          <el-col :xs="6" :sm="6" :md="4" :lg="3" :xl="1"
            ><div
              class="grid-content"
              style="text-align: left"
              @click="drawer = true"
              type="primary"
            >
              <i class="el-icon-menu marginTop"></i></div
          ></el-col>
          <el-col :xs="10" :sm="10" :md="8" :lg="18" :xl="19"
            ><div class="grid-content ">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }"
                  >首页</el-breadcrumb-item
                >
                <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                <el-breadcrumb-item>活动详情</el-breadcrumb-item>
              </el-breadcrumb>
            </div></el-col
          >
          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
            ><div class="grid-content">
              <div class="demo-type">
                <div>
                  <el-avatar
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                  ></el-avatar>
                </div>
              </div>

              <el-dropdown :hide-on-click="false">
                <i class="el-icon-setting" style="margin-right: 15px"></i>
                <el-dropdown-menu slot="dropdown" :hide-after="0">
                  <el-tooltip
                    placement="top"
                    style="border: none;0"
                    :hide-after="0"
                  >
                    <div slot="content">python课程设计<br />数据库概论</div>
                    <el-button>我的科目</el-button>
                  </el-tooltip>
                  <!-- <el-dropdown-item>我的班级</el-dropdown-item> -->
                  <el-dropdown-item>
                    <el-popconfirm title="确认退出登录？">
                      <el-button slot="reference" style="border: none;"
                        >退出</el-button
                      >
                    </el-popconfirm>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div></el-col
          >
        </el-row>
      </el-header>
      <!--        主要内容部分-->
      <el-main style="max-height: 820px;">
        <!-- 页面tab栏 -->
        <!-- <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="信息统计" name="first">
          </el-tab-pane>
          <el-tab-pane label="科目修改" name="second">
           
          </el-tab-pane>
          <el-tab-pane label="科目录入" name="third"></el-tab-pane>
          <el-tab-pane label="学生管理" name="fourth"></el-tab-pane>
        </el-tabs> -->
        <!-- 手写top标签栏与左边栏联动 -->
        <div class="tab">
          <div class="content">
            <!--6个按钮-->
            <button
              :class="index == number ? 'btn1' : 'btn'"
              @click="tab(index)"
              v-for="(item, index) in dataList"
              :key="index"
            >
              {{ item.option }}
            </button>
          </div>
          <!--6个div-->
          <div id="content1" v-show="number == 0">
            1
          </div>
          <div id="content2" v-show="number == 1">
            <el-table
              style="width: 100%"
              :data="CourseData"
              :border="true"
              height="480"
              :row-class-name="tableRowClassName"
            >
              <el-table-column label="cno" align="center">
                <template slot-scope="{ row }">
                  <span v-show="!row.edit">{{ row.cno }}</span>
                  <el-input v-show="row.edit" v-model="row.cno"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="name" prop="name">
                <template slot-scope="{ row }">
                  <span v-show="!row.edit">{{ row.name }}</span>
                  <el-input v-show="row.edit" v-model="row.name"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="type" prop="type">
                <template slot-scope="{ row }">
                  <span v-show="!row.edit">{{ row.type }}</span>
                  <el-input v-show="row.edit" v-model="row.type"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="credit" prop="credit">
                <template slot-scope="{ row }">
                  <span v-show="!row.edit">{{ row.credit }}</span>
                  <el-input v-show="row.edit" v-model="row.credit"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                  <el-input
                    v-model="search"
                    size="mini"
                    placeholder="输入关键字搜索"
                  />
                </template>
                <template slot-scope="{ row }">
                  <div style="display: flex;justify-content: space-around ">
                    <el-button
                      size="mini"
                      @click="row.edit = !row.edit"
                      type="primary"
                      plain
                      >Edit</el-button
                    >
                    <el-dropdown-item>
                      <el-popconfirm title="确认删除？" style="display: flex;">
                        <el-button
                          slot="reference"
                          size="mini"
                          type="danger"
                          plain
                          @click="handleDelete(row.$index, row.row)"
                          >Delete</el-button
                        >
                      </el-popconfirm>
                    </el-dropdown-item>
                    <!-- <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >Delete</el-button
                > -->
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="block">
              <!-- <span class="demonstration">调整每页显示条数</span> -->
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage2"
                :page-sizes="[20, 50, 100, 150]"
                :page-size="20"
                layout="sizes, prev, pager, next"
                :total="1000"
              >
              </el-pagination>
            </div>
          </div>
          <div id="content3" v-show="number == 2">
            3
          </div>
          <div id="content4" v-show="number == 3">
            4
          </div>
          <div id="content5" v-show="number == 4">
            5
          </div>
          <div id="content6" v-show="number == 5">
            <!-- 按钮部分 -->
            <div style="display: flex;">
              <!-- 最高低分按钮显示样式 -->
              <div style="margin-right: 30px;">
                <el-button @click="show3 = !show3" style="margin-bottom: 10px;"
                  >Limit points</el-button
                >
                <el-collapse-transition>
                  <div v-show="show3">
                    <div class="transition-box">highest：</div>
                    <div class="transition-box">minimum：</div>
                  </div>
                </el-collapse-transition>
              </div>
              <!-- 平均分按钮显示样式 -->
              <div>
                <el-button @click="show1 = !show1" style="margin-bottom: 10px;"
                  >Average score</el-button
                >
                <el-collapse-transition>
                  <div v-show="show1">
                    <div class="transition-box">average：</div>
                  </div>
                </el-collapse-transition>
              </div>
              <!-- 不及格人数按钮样式 -->
              <div style="margin-left: 30px;">
                <el-button @click="show2 = !show2" style="margin-bottom: 10px;"
                  >Failing Grades</el-button
                >
                <el-collapse-transition>
                  <div v-show="show2">
                    <div class="transition-box">numbers：</div>
                  </div>
                </el-collapse-transition>
              </div>
            </div>

            <!-- 表格部分-- -->
            <el-table
              id="SubjectTable"
              style="width: 100%;padding: 0; "
              :data="tableData"
              :border="true"
              height="440"
              :row-class-name="tableRowClassName"
            >
              <el-table-column label="sno" prop="sno">
                <template slot-scope="{ row }">
                  <span v-show="!row.edit">{{ row.sno }}</span>
                  <el-input
                    autosize
                    v-show="row.edit"
                    v-model="row.sno"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="name" prop="name">
                <template slot-scope="{ row }">
                  <span v-show="!row.edit">{{ row.name }}</span>
                  <el-input
                    autosize
                    v-show="row.edit"
                    v-model="row.name"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="sex" prop="sex">
                <template slot-scope="{ row }">
                  <span v-show="!row.edit">{{ row.sex }}</span>
                  <el-input
                    autosize
                    v-show="row.edit"
                    v-model="row.sex"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="date" prop="date">
                <template slot-scope="{ row }">
                  <span v-show="!row.edit">{{ row.date }}</span>
                  <el-input
                    autosize
                    v-show="row.edit"
                    v-model="row.date"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="sdept" prop="sdept">
                <template slot-scope="{ row }">
                  <span v-show="!row.edit">{{ row.sdept }}</span>
                  <el-input
                    autosize
                    v-show="row.edit"
                    v-model="row.sdept"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="science" prop="science">
                <template slot-scope="{ row }">
                  <span v-show="!row.edit">{{ row.science }}</span>
                  <el-input
                    autosize
                    v-show="row.edit"
                    v-model="row.science"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="class" prop="class">
                <template slot-scope="{ row }">
                  <span v-show="!row.edit">{{ row.class }}</span>
                  <el-input
                    autosize
                    v-show="row.edit"
                    v-model="row.class"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                  <el-input
                    v-model="search"
                    size="mini"
                    placeholder="输入关键字搜索"
                  />
                </template>
                <template slot-scope="{ row }">
                  <div style="display: flex;justify-content: space-around ">
                    <el-button
                      size="mini"
                      @click="row.edit = !row.edit"
                      type="primary"
                      plain
                      >Edit</el-button
                    >
                    <el-dropdown-item style="padding: 0;margin: 0;">
                      <el-popconfirm
                        title="确认删除？"
                        style="padding: 0; margin: 0;"
                      >
                        <el-button
                          slot="reference"
                          size="mini"
                          type="danger"
                          plain
                          >Delete</el-button
                        >
                      </el-popconfirm>
                    </el-dropdown-item>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <!-- 页脚部分 -->
            <div class="block">
              <!-- <span class="demonstration">调整每页显示条数</span> -->
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage2"
                :page-sizes="[20, 50, 100, 150]"
                :page-size="20"
                layout="sizes, prev, pager, next"
                :total="1000"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </el-main>
      <el-footer> </el-footer>
    </el-container>
  </el-container>
</template>
<script>
export default {
  name: "HomeView",
  data() {
    return {
      dianji: 0,
      number: 0, //点击后的值，与下标同步，为0表示默认第一个按钮与div为选中状态
      dataList: [
        { option: "Statistics" },
        { option: "Enter" },
        { option: "Modify" },
        { option: "Score Entry" },
        { option: "Student Modify" },
        { option: "Enter Student" }
      ],

      activeName: "first",
      // 抽屉打开参数
      drawer: false,
      direction: "rtl",
      // 按钮打开参数
      show3: false,
      show2: false,
      show1: false,
      search: "",
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,

      editableTabsValue: "2",
      editableTabs: [
        {
          title: "Tab 1",
          name: "1",
          content: "Tab 1 content"
        },
        {
          title: "Tab 2",
          name: "2",
          content: "Tab 2 content"
        }
      ],
      tabIndex: 2,
      CourseData: [
        {
          name: "数据库概论",
          cno: "001",
          credit: 2,
          type: "计算机科学与技术",
          edit: false
        },
        {
          name: "os操作系统",
          cno: "002",
          credit: 1,
          type: "计算机科学与技术",
          edit: false
        },
        {
          name: "概率论",
          cno: "003",
          credit: 1.5,
          type: "大数据",
          edit: false
        },
        {
          name: "马克思主义概论",
          cno: "004",
          credit: 2.5,
          type: "马克思院",
          edit: false
        },
        {
          name: "线性代数",
          cno: "005",
          credit: 1.5,
          type: "计算机科学与技术",
          edit: false
        }
      ],
      tableData: [
        {
          date: "2021-05-02",
          name: "王小虎",
          sno: "2021081224",
          sex: "男",
          sdept: "计算机工程学院",
          class: "计科212",
          science: "计算机科学与技术",
          edit: false
        },
        {
          date: "2021-05-05",
          name: "王小帅",
          sno: "2021081225",
          sex: "男",
          sdept: "计算机工程学院",
          class: "计科212",
          science: "人工智能",
          edit: false
        },
        {
          date: "2021-08-02",
          name: "王小美",
          sno: "2021081214",
          sex: "女",
          sdept: "计算机工程学院",
          class: "计科211",
          science: "计算机科学与技术",
          edit: false
        },
        {
          date: "2021-25-02",
          name: "王小吖",
          sno: "2021081204",
          sex: "男",
          sdept: "计算机工程学院",
          class: "计科212",
          science: "计算机科学与技术",
          edit: false
        },
        {
          date: "2021-05-02",
          name: "王小",
          sno: "2021081224",
          sex: "男",
          sdept: "计算机工程学院",
          class: "计科211",
          science: "计算机科学与技术",
          edit: false
        }
      ]
    };
  },

  methods: {
    tableRowClassName({ row, rowIndex }) {
      //   if (rowIndex === 1) {
      //     return "warning-row";
      //   } else if (rowIndex === 3) {
      //     return "success-row";
      //   }
      return "common-row";
    },
    // 页数显示方法
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    //
    //定义切换方法
    tab(index) {
      this.number = index;
      console.log(index, this.number);
    },

    index1() {
      this.number = 0;
    },
    index2() {
      this.number = 1;
    },
    index3() {
      this.number = 2;
    },
    index4() {
      this.number = 3;
    },
    index5() {
      this.number = 4;
    },
    index6() {
      this.number = 5;
    }
  }
};
</script>

<style>
.el-table {
  .el-button {
    width: 56px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.el-table .warning-row {
  background: oldlace;
}
.el-table .common-row {
  /* height: 30px; */
  padding: 0;
  font-size: smaller;
  /* background-color: #7191b7; */
}
.el-table .success-row {
  background: #f0f9eb;
}
/* 抽屉背景样式 */
.el-drawer ltr {
  background-color: #304156;
}
.el-row.el-menu {
  display: flex;
  background-color: #304156;
  /* max-width: 100px; */
}
.el-row.el-drawer__header,
.el-drawer__body {
  background-color: #304156;
}
el-aside,
.el-row.el-drawer__body {
  background-color: #304156;
  border: none;
  max-width: 100px;
}
.el-row.el-submenu__title {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
/* 最高低分按钮显示样式 */
.transition-box {
  margin-bottom: 10px;
  width: 150px;
  height: 50px;
  border-radius: 4px;
  background-color: #2b5c99;
  text-align: center;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  /* font-family: "PMZD"; */

  /* padding: 30px 10px; */
  box-sizing: border-box;
  margin-right: 20px;
}
/* 页数显示样式 */
.block {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.marginTop {
  margin-top: 20px;
}
.el-aside {
  padding-top: 140px;
  border: none;
}
.el-menu-item-group {
  background-color: #2d3a4b;
}
.navigation:hover {
  background-color: #7191b7;
}
.navigation {
  background-color: #304156;
}
.el-submenu .el-menu-item {
  color: #fff;
  font-family: "PMZD";
}
.el-submenu__title {
  color: #fff;
  font-family: "PMZD";
}

/* 布局demo  顶部栏 */
.grid-content {
  font-size: 30px;
  border-radius: 5px;
  min-height: 50px;
  display: flex;
  align-items: end;
}

/* tarbar样式 */
.tab {
  /* display: flex; */
}
.content {
  display: flex;
  /* width: 1000px; */
  /* display: inline; */
  border-bottom: 0.5px solid #e4e7ed;
  /* background-color: #409eff; */
}
.btn {
  width: 150px;
  height: 40px;
  border: 0;
  color: #909399;
  padding: 0;
  /* margin: 20px 0px; */
  background-color: #fff;
  border-top: #e4e7ed 1px solid;
  border-left: #e4e7ed 1px solid;
  border-right: #e4e7ed 1px solid;
  border-bottom: #e4e7ed 0.5px solid;
}

/*选中时*/
.btn1 {
  width: 150px;
  height: 40px;
  border: none;
  /* border: #e4e7ed 1px solid; */
  border-top: #e4e7ed 1px solid;
  border-left: #e4e7ed 1px solid;
  border-right: #e4e7ed 1px solid;
  color: #409eff;
  /* margin: 20px 0px; */
  background-color: #fff;
  padding: 0;
}

#content1,
#content2,
#content3,
#content4,
#content5,
#content6 {
  /* background-color: #fff;
  height: 660px;
  font-size: 16px;
  line-height: 40px; */
  margin-top: 20px;
}
</style>
